<style lang="less">
    @import '../../../styles/common.less';
</style>
<template>
    <div>
        <Form ref="formValidate" :model="formValidate"  :rules="ruleValidate" :label-width="80">
            <FormItem label="name属性" prop="columnName" >
                <Input v-model="formValidate.columnName" placeholder="输入name属性"></Input>
            </FormItem>
            <FormItem label="字段类型" prop="columnType">
                <Select  v-model="formValidate.columnType"filterable placeholder="字段类型" @on-change="handleChange">
                    <i-option  v-for="columnType in columnTypes" :value="columnType.code" :key="columnType.code">{{columnType.name}}</i-option>
                </Select>
            </FormItem>
            <FormItem label="字段长度" prop="columnPrecision" >
                <InputNumber v-model="formValidate.columnPrecision" :min="0" placeholder="字段长度" :disabled="columnPrecisionDisabled"></InputNumber>
            </FormItem>
            <FormItem label="小数点" prop="columnPrecisionDecimal">
                <InputNumber v-model="formValidate.columnPrecisionDecimal":min="0" :max="10" :disabled="columnPrecisionDecimalDisabled" placeholder="小数点"></InputNumber>
            </FormItem>
            <FormItem label="字段描述" prop="columnComment">
                <Input v-model="formValidate.columnComment" placeholder="字段描述"></Input>
            </FormItem>
            <FormItem >
                <Button  type="primary" @click="handlePost('formValidate')" style=" float: left; margin-right: 8px" >保存</Button>
                <Button  type="warning" @click="handleCancel()" style=" float: left; ">取消</Button>
            </FormItem>
        </Form>
    </div>

</template>
<script>
import api  from '../../../libs/api';
import {eventBus} from "../../../libs/eventBus";
import canEditTable from '../../tables/components/canEditTable';
import validator from "../../../libs/validator"
export default {
    name: 'table_column',
    components: {
        canEditTable
    },
    props:{
        formTemplateId: {
            type: String,
            default () {
                return "";
            }
        }
    },
    data() {
        return {
            formValidate: {
                columnName: '',
                columnType: '',
                columnPrecision: null,
                columnPrecisionDecimal:null,
                columnComment: ''
            },
            columnTypes:[],
            columnPrecisionDecimalDisabled:false,
            columnPrecisionDisabled:false,
            precisionDecimalType:["decimal","double","float"], //需要小数位数的数据类型列表
            precisionExcludeType:["date","datetime","timestamp"], //时间类型不需要精度
            ruleValidate: {
                columnName: [
                    { required: true, message: 'name属性不允许为空', trigger: 'blur' },
                    { validator: validator.word, trigger: 'blur' }
                ],
                columnComment: [
                    { required: true, message: '字段描述不允许为空', trigger: 'blur' }
                ],
                columnType: [
                    { required: true, message: '请选择字段类型', trigger: 'blur' }
                ]
            }
        }
    },
    methods:{
        handlePost (name) {
            this.$refs[name].validate((valid) => {
                if (valid) {
                    this.$post((api.tableTemplates.column.replace("{templateId}",this.formTemplateId)),this.formValidate).then(response => {
                        if(200==response.code){
                            this.$refs[name].resetFields();
                            eventBus.$emit("closeColumnDrawer");
                            eventBus.$emit("freshTableMetaData");
                        }
                    });
                }
            })
        },
        handleCancel(){
            eventBus.$emit("closeColumnDrawer");
        },
        handleColumnType(){
            let self=this;
            this.$get(api.dictionarys.enum,{type:"ColumnTypeEnum"}).then(res=>{
                if(200==res.code){
                    self.columnTypes=res.obj;
                }
            })
        },
        handleChange(value){
            if(this.precisionExcludeType.indexOf(value)>-1){
                this.columnPrecisionDecimalDisabled=true,
                    this.columnPrecisionDisabled=true;
            }else if(this.precisionDecimalType.indexOf(value)>-1){
                this.columnPrecisionDecimalDisabled=false,
                    this.columnPrecisionDisabled=false;
            }else{
                this.columnPrecisionDecimalDisabled=true,
                    this.columnPrecisionDisabled=false;
            }


        }
    },
    mounted() {
        this.handleColumnType();
    }
}
</script>